<template>
  <div class="content" v-loading="loading">
    <!--头部-->
    <div class="header-setting">
      <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item>
          <a href="../main">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>运营服务</a-breadcrumb-item>
        <a-breadcrumb-item>日志管理</a-breadcrumb-item>
      </a-breadcrumb>

      <!--查询条件-->
      <div class="box-condition-body">
        <div class="box-condition-item">
          <div style="margin: 0 50px">IP地址</div>
          <a-input
            style="margin-right: 50px; width: 200px"
            placeholder="IP地址"
            v-model="queryCondition.ipAddress"
            @change="() => this.queryData()"
          />

          <div style="margin: 0 50px">时间</div>
          <div class="button_time">
            <a-button type="primary" @click="button_time(0)">今天</a-button>
            <a-button type="primary" @click="button_time(1)">昨天</a-button>
            <a-button type="primary" @click="button_time(2)">本周</a-button>
            <a-button type="primary" @click="button_time(3)">上周</a-button>
            <a-button type="primary" @click="button_time(4)">本月</a-button>
          </div>

          <div style="margin: 0 50px">
            <a-range-picker
              :showTime="{ format: 'HH:mm' }"
              format="YYYY-MM-DD HH:mm"
              :placeholder="['开始时间', '结束时间']"
              @ok="() => this.queryData()"
              @change="onChange"
              :value="momentArr"
            />
          </div>
        </div>
        <div class="box-condition-item">
          <div style="margin: 0 50px">操作员</div>
          <a-input
            style="margin-right: 50px; width: 200px"
            placeholder="操作员"
            v-model="queryCondition.nickName"
            @change="() => this.queryData()"
          />

          <div style="margin: 0 50px">内容</div>
          <a-input
            style="margin: 0 100px 0 0px; width: 200px"
            placeholder="内容"
            v-model="queryCondition.content"
            @change="() => this.queryData()"
          />

          <div style="margin: 0 50px">日志类型</div>
          <a-select
            optionFilterProp="children"
            showSearch
            placeholder="日志类型"
            v-model="queryCondition.logType"
            @change="() => this.queryData()"
            style="margin: 0 100px 0 0px; width: 200px"
          >
            <a-select-option
              v-for="log in LOG_TYPE"
              :key="log.code"
              :value="log.code"
            >
              {{ log.name }}
            </a-select-option>
          </a-select>

          <!-- 重置 -->
          <a-button
            type="primary"
            icon="search"
            @click="selecDuate"
            style="margin-left: -40px"
            >查询</a-button
          >
          <a-button
            icon="sync"
            @click="clearConditionAndQury"
            style="margin-left: 10px"
            >重置</a-button
          >
        </div>
      </div>
    </div>

    <!-- 内容 -->
    <div class="box-form">
      <!--工具栏-->
      <div class="box-tool">
        <div></div>
        <div style="display: flex" v-if="false">
          <a-button type="primary" @click="downloadDataClick" icon="download"
            >导出</a-button
          >
        </div>
      </div>
      <!--数据表格-->
      <div class="box-table">
        <a-table
          :columns="columns"
          :dataSource="dataSource"
          :pagination="pagination"
          bordered
          size="small"
          :scroll="{ y: 550 }"
          :customRow="customRow"
          @change="tableTabSort"
          :rowClassName="setRowClassName"
        >
          <template slot="logTypeSlot" slot-scope="text">
            <template>
              {{ computerLogTypeStr(text) }}
            </template>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
const LOG_TYPE = [
  { name: "所有类型", code: "0" },
  { name: "修改车牌", code: "1" },
  { name: "异常离场", code: "2" },
  { name: "重命名车位", code: "12" },
  { name: "删除车位", code: "13" },
  { name: "解绑/换绑设备", code: "14" },
  { name: "MQ消费端异常", code: "15" },
];

import moment from "moment";
import LogManagerApi from "../../api/operate/LogManager";

const columns = [
  {
    title: "序号",
    dataIndex: "no",
    width: "5%",
  },
  {
    title: "创建时间",
    dataIndex: "createdTime",
    width: "15%",
  },
  {
    title: "操作员",
    dataIndex: "nickName",
    width: "10%",
  },
  {
    title: "ip地址",
    dataIndex: "ipAddress",
    width: "10%",
  },
  {
    title: "日志类型",
    dataIndex: "logType",
    width: "10%",
    scopedSlots: { customRender: "logTypeSlot" },
  },
  {
    title: "操作内容",
    dataIndex: "content",
    width: "30%",
  },
  {
    title: "备注",
    dataIndex: "remark",
  },
];

export default {
  name: "LogManager",

  /*数据层*/
  data() {
    return {
      momentArr: [],

      /* --- 表格 --- */
      pagination: {
        showTotal: (total) => `共${total}条`,
        defaultCurrent: 1,
        current: 1,
        total: 0,
        defaultPageSize: 10,
        showQuickJumper: true,
      },
      columns: columns,
      dataSource: [],

      /* --- 选中 --- */
      selectItem: undefined,

      /* --- 日志 --- */
      LOG_TYPE,

      /* --- 条件 --- */
      queryCondition: {
        limit: 10,
        logType: [],
        nickName: "",
        ipAddress: "",
        content: "",
      },
      loading: false,
    };
  },

  /*方法层*/
  methods: {
    /* 日期选择 */
    onChange(date) {
      this.momentArr = date;
    },

    /* ----------------- 查询 ----------------- */
    button_time(e) {
      let momentStart;
      let momentEnd;
      switch (e) {
        case 0:
          momentStart = moment().startOf("day");
          momentEnd = moment().endOf("day");
          break;
        case 1:
          momentStart = moment().add("day", -1).startOf("day");
          momentEnd = moment().add("day", -1).endOf("day");
          break;
        case 2:
          momentStart = moment().week(moment().week()).startOf("week");
          momentEnd = moment().week(moment().week()).endOf("week");
          break;

        case 3:
          momentStart = moment()
            .week(moment().week() - 1)
            .startOf("week");
          momentEnd = moment()
            .week(moment().week() - 1)
            .endOf("week");
          break;
        case 4:
          momentStart = moment().month(moment().month()).startOf("month");
          momentEnd = moment().month(moment().month()).endOf("month");
          break;
        default:
          break;
      }
      this.$set(this, "momentArr", [momentStart, momentEnd]);
      this.queryData();
    },

    tableTabSort(pagination) {
      this.queryData(pagination.current);
    },

    getQueryCondition() {
      let condition = this.queryCondition;
      let startTimeStamp = "";
      let endTimeStamp = "";
      condition.plate = this.inputPlateNo || "";
      condition.parkID = this.selectParkId;
      if (this.momentArr != undefined && this.momentArr.length != 0) {
        condition.timeScreenCondition = "6";
        startTimeStamp = new Date(this.momentArr[0]).getTime() / 1000;
        endTimeStamp = new Date(this.momentArr[1]).getTime() / 1000;
      } else {
        condition.timeScreenCondition = "0";
      }
      condition.startTimeStamp = startTimeStamp;
      condition.endTimeStamp = endTimeStamp;
      return { ...condition };
    },

    queryData(curr) {
      this.loading = true;
      let condition = this.getQueryCondition();
      condition.curr = curr || 1;
      LogManagerApi.getAdminLogRecordList(condition)
        .then((data) => {
          let { total, pageNum, pageSize, list } = data.data;
          let array = list.map((item, index) => {
            return { ...item, no: total - (pageNum - 1) * pageSize - index };
          });
          this.dataSource = array;
          this.pagination.total = total;
          this.pagination.current = pageNum;
          this.loading = false;
        })
        .catch((err) => {
          let data = err.data;
          let msg = err.msg;
          this.$message.error(data || msg);
          this.loading = false;
        });
    },

    clearConditionAndQury() {
      this.queryCondition.nickName = "";
      this.queryCondition.ipAddress = "";
      this.queryCondition.content = "";
      this.queryCondition.logType = "0";
      this.momentArr = null;
      this.queryData();
    },

    /* ----------------- 表格 ----------------- */
    customRow(record) {
      return {
        on: {
          click: () => {
            this.selectItem = record;
          },
        },
      };
    },

    clearSelect() {
      this.selectItem = undefined;
    },

    setRowClassName(record) {
      if (!this.selectItem) return "";
      return record.id === this.selectItem.id ? "clickRowStyl" : "";
    },

    /* ----------------- 导出 ----------------- */
    downloadDataClick() {
      //导出数据
    },

    selecDuate() {
      this.queryData();
    },
  },

  /*渲染层*/
  mounted() {
    this.$store.dispatch("showHead");
    this.queryData();
  },
  computed: {
    computerLogTypeStr() {
      return function (code) {
        let filter = this.LOG_TYPE.filter((x) => {
          if (x.code == code) {
            return true;
          }
          return false;
        });
        if (filter.length > 0) {
          return filter[0].name;
        }
        return "";
      };
    },
  },
};
</script>

<style scoped>
.content {
  width: 100%;
  height: 100%;
}

.header-setting {
  width: 100%;
  height: 174px;
  background: #fff;
}

.header-setting .breadcrumb {
  margin: 0 41px;
  padding-top: 15px;
}

/*表格行选中背景颜色*/
.clickRowStyl {
  background-color: #c1e0fd;
}

.box-condition-item {
  display: flex;
  align-items: center;
  min-width: 1500px;
  padding: 15px 0;
}

.box-condition-item .box-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 5px 20px 5px;
}

.button_time button {
  margin-left: 10px;
}

/* 表单 */
.box-form {
  padding-left: 40px;
  padding-right: 40px;
  min-height: 705px;
  background: #fff;
  margin-top: 8px;
}

.box-form .box-tool {
  padding-top: 11px;
  margin: 8px 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
